// 要使用 JSX 的语法，则必须引入 react 包
import React from 'react'
// 将 DOM 节点挂载到页面中
import ReactDOM from 'react-dom'

// 定义一个变量保存 jsx 的值
// 在 jsx 语法中，可以使用 { js-expression } 来计算 JavaScript 表达式的结果
// const app = <h1>hello app { 2 + 3 } {'abc'.slice(2)}</h1>

// 定义一个函数，返回 jsx 元素
// const app = (params) => {
//   return <h1>hello { params.title }</h1>
// }

// 定义一个组件：函数组件
// 函数参数是组件所接收的所有属性表示的对象
const App = props => {
  return <h1>hello { props.title }</h1>
}

// 调用 ReactDOM 的 render() 渲染挂载节点
ReactDOM.render(
  // jsx，它是在 react 中的一种特殊的语法
  // <h1>hello react</h1>,
  // 引用变量
  // app,
  // 调用函数
  // app({title: 'react'}),
  // 使用函数组件
  <App title="world" />,
  document.querySelector('#root')
)
